<template>
  <view class="">
    <view class="main">
      <!-- 奖杯 -->
      <view class="radar_box">
        <view class="radar_title cup_container">
          <text>我的奖杯</text>
          <text>奖杯数量：2/7</text>
          <uni-icons type="right" size="16" color="#5E5E5E" class="right_icon" @click="gotoCup"></uni-icons>
        </view>

        <view class="tab_box">
          <view :class="['tab_item', tabActive === 0 ? 'tabActive' : '']" @click="tabClick(0)">线上奖杯</view>
          <view :class="['tab_item', tabActive === 1 ? 'tabActive' : '']" @click="tabClick(1)">线下奖杯</view>
        </view>

        <uni-swiper-dot :current="current" :dots-styles="dotsStyles" field="content" mode="round" @clickItem="clickItem" :info="medalList">
          <swiper :interval="3000" :duration="1000" @change="change" :current="swiperDotIndex" class="uni_swiper">
            <swiper-item v-for="(item, index) in medalList" :key="index" class="uni_swiper_item">
              <view class="medal_list_box">
                <view class="medal_list" v-for="(it, key) in item.child" :key="key">
                  <image :src="`${$api.imgURL}/cup${it.imgUrl}`" mode="aspectFill" class="medal_icon"></image>
                  <view>{{ it.name }}</view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import uCharts from "@/components/u-charts/u-charts.js";
import uniSwiperDot from "@/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue";

// 数据定义
const pixelRatio = ref(0.98);
const radar = ref({
  categories: ['记忆力', '逻辑思维', '知识储备', '反应速度', '注意力', '视觉认知'],
  series: [{ name: '熟悉度', data: [95, 100, 80, 60, 40, 95] }]
});
const tabActive = ref(0);
const medalList = ref([
  { name: '居家安全', imgUrl: '/medal1.png', notImgUrl: '/opacity_icon.png', isObtain: 1 },
  { name: '社会安全', imgUrl: '/medal2.png', notImgUrl: '/opacity_icon.png', isObtain: 1 },
  { name: '消防安全', imgUrl: '/medal3.png', notImgUrl: '/opacity_icon.png', isObtain: 1 },
  { name: '消防安全', imgUrl: '/medal4.png', notImgUrl: '/opacity_icon.png', isObtain: 0 }
]);
const swiperDotIndex = ref(0);
const current = ref(0);
const dotsStyles = ref({
  width: 8,
  backgroundColor: "#FFED9D",
  selectedBackgroundColor: "#FBC22D",
  border: '0px rgba(0, 0, 0, 0) solid',
  selectedBorder: '0px rgba(0, 0, 0, 0) solid'
});
const cWidth = ref(0);
const cHeight = ref(0);

// 生命周期
onMounted(() => {
  cWidth.value = uni.upx2px(440);
  cHeight.value = uni.upx2px(300);
    // showRadar("canvasRadar", radar.value);
  medalSortArr(medalList.value);
  
});

// 方法
const change = (e) => {
  current.value = e.detail.current;
};

const clickItem = (e) => {
  swiperDotIndex.value = e;
};

const medalSortArr = (data) => {
  medalList.value = data.reduce((result, item, index) => {
    const chunkIndex = Math.floor(index / 3);
    if (!result[chunkIndex]) {
      result[chunkIndex] = { child: [] };
    }
    result[chunkIndex].child.push(item);
    return result;
  }, []);
};

const tabClick = (index) => {
  tabActive.value = index;
};

const gotoCup = () => {
  uni.navigateTo({
    url: '/pages/gamePage/cupIndex'
  });
};

const showRadar = (canvasId, chartData) => {
  console.log('开始画图')
  new uCharts({
    $this: this,
    canvasId: canvasId,
    type: 'radar',
    fontSize: 11,
    padding: [5, 5, 5, 5],
    legend: { show: false },
    colors: ['#FBC22D'],
    background: '#FFFFFF',
    pixelRatio: pixelRatio.value,
    animation: true,
    dataLabel: true,
    categories: radar.value.categories,
    series: radar.value.series,
    width: cWidth.value * pixelRatio.value,
    height: cHeight.value * pixelRatio.value,
    extra: {
      radar: {
        max: 100,
        opacity: 0.6,
        labelColor: '#A3ACBF',
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.main {
  box-sizing: border-box;
  padding: 0 25rpx;
}

.radar_box {
  box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(112, 112, 112, 0.05);
  border-radius: 40rpx;
  width: 702rpx;
  box-sizing: border-box;
  padding: 30rpx 40rpx;
  background: #fff;
  margin: 32rpx auto;

  .radar_title {
    font-size: 36rpx;
  }

  .charts {
    width: 440rpx;
    box-sizing: border-box;
    position: relative;
  }
}

.content_box {
  display: flex;
  margin-top: 30rpx;
  overflow: auto;

  .content_left {
    width: 40%;
  }

  .content_left_info {
    display: flex;
    margin-bottom: 24rpx;

    .content_item {
      width: 50%;
    }
  }

  .numbers {
    font-weight: 500;
    font-size: 36rpx;
  }

  .num_desc {
    font-size: 24rpx;
    color: #A3ACBF;
  }

  .view_btn {
    width: 204rpx;
    height: 60rpx;
    background: #FBC22D;
    font-weight: 600;
    font-size: 24rpx;
    border-radius: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5rpx;

    text {
      line-height: 1;
    }
  }
}

.cup_container {
  display: flex;
  align-items: flex-end;

  text {
    &:nth-child(1) {
      line-height: 36rpx;
      margin-right: 10rpx;
    }

    &:nth-child(2) {
      font-weight: 400;
      font-size: 22rpx;
      color: #5E5E5E;
    }
  }

  .right_icon {
    margin-left: auto;
  }
}

.tab_box {
  display: flex;
  margin: 35rpx 0;

  view {
    &:nth-child(1) {
      margin-right: 20rpx;
    }
  }

  .tab_item {
    color: #A3ACBF;
    background: #F7F8FC;
    border-radius: 30rpx;
    border: 1rpx solid #F7F8FC;
    box-sizing: border-box;
    padding: 8rpx 15rpx;
    font-size: 28rpx;
    line-height: 1;
  }
}

.tabActive {
  color: #2C2E3D !important;
  background: #FEEEBD !important;
  border: 1rpx solid #FDDB7B !important;
}

.uni_swiper {
  width: 622rpx;
  height: 250rpx;
}

.uni_swiper_item {
  overflow: inherit !important;
  height: 250rpx;
}

.medal_list_box {
  width: 622rpx;
  display: flex;
  position: absolute;
  bottom: 50rpx;
}

.medal_list {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-left: 45rpx;

  view {
    font-size: 24rpx;
  }

  .medal_icon {
    width: 142rpx;
    height: 158rpx;
  }
}
</style>